<template>
  <div class="about">
    <div class="top">
      <div class="search">
        <span><img src="../assets/img/ser.png" alt="" /></span>
        菜坝电商年货节
      </div>
    </div>
    <div class="ify">
      <!-- 左边 -->
      <div class="ifyleft">
        <van-sidebar v-model="activeKey" >
          <van-sidebar-item 
            v-for="(ite,index) in classList" 
            :key="ite.id" 
            :title="ite.name"
            :url="'#id'+index" 
          />
        </van-sidebar>
      </div>
      <div class="ifyrigth">
        <div class="ifyCommodity">
          <img src="../assets/img/cate.png" alt="" />
          <div class="ify-type" v-for="(item,index) in classList" :key="item.id">
            <div class="ify-type-title">
              <p :id="'id'+index">{{item.name}}</p>
              <span>尊享新春服务</span>
            </div>
            <div class="ify-type-list">
              <router-link v-for="ite in item.children" :key="ite.id" :to="'/foodclassify/'+ite.id">
                <img :src="imgs+ite.icon" alt="" />
                <span>{{ite.name}}</span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer :active-num="1"/>
  </div>
</template>

<script>
import request from "../utils/request.js";
import Footer from '../components/Footer.vue'
export default {
  data() {
    return {
      activeKey: 0,
      classList:[],
      imgs: "https://caiba-produce.oss-cn-beijing.aliyuncs.com//",
    };
  },
  components: {
      Footer,
  },
  created() {
    request.get("/gct/web/front/index/TreeList").then((res) => {
            this.classList = res.data.data;
      })
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/classify.css");
@import url("../assets/css/reset.css");
</style>